<template>
  <div class="body">
    <div class="title">
      <P>旅游方案</P>
    </div>
    <div class="line"></div>
    <div class="schedule">
      <div class="childSchedule" v-for="(item, index) in concreteScheme" :key="index">
        <div class="spacer1"></div>
        <div class="text">
          <h2>
            第{{ index+1 }}天
          </h2>
          <h3>行程:</h3>
          <div class="xc" v-for="(item1,index1) in item" :key="index1">
           <i class="el-icon-map-location"></i> {{ item1.name }}
           <i class="el-icon-position"></i>{{ item1.position }}
           <i class="el-icon-time"></i>{{ item1.playTime }}小时
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: this.$route.query.userId,
      txUrl:
        "",
      userName: "",
      concreteScheme: [],
    };
  },
  methods: {
    hqy() {
      let _this = this;
      const axios = require("axios");
      let data = JSON.stringify({
        "userID": _this.userId,
      });
      let config = {
        method: "post",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/userMessage/get",
        headers: {
          "Content-Type": "application/json",
          "token": localStorage.getItem("JWT_TOKEN"),
        },
        data: data,
      };
      axios
        .request(config)
        .then((response) => {
          _this.userName = response.data.data.username;
          _this.txUrl = response.data.data.txUrl;
          const param1 = _this.userId;
          const param2 = _this.txUrl;
          const param3 = _this.$route.name;
          const param4 = _this.userName;
          _this.$emit("childEvent", { param1, param2, param3, param4 });
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.concreteScheme = this.$route.query.selectSchemeResult;
  },
  mounted() {
    this.hqy();
    console.log(this.concreteScheme);
  },

};
</script>
<style scoped>
.body {
  user-select: none;
  height: auto;
  min-height: 1000px;
  width: 100%;
}

.title {
  text-align: center;
  position: relative;
  height: 80px;
  width: 60%;
  margin: 40px auto;
}

.title p {
  font-size: 40px;
}

.line {
  border-top: 1px solid black;
  margin: 0 auto;
  width: 80%;
}

.pic {
  height: 400px;
  width: 80%;
  margin: 50px auto;
  background-size: 100% 100%
}

.schedule {
  overflow: auto;
  width: 80%;
  height: auto;
  min-height: 800px;
  margin: 0 auto;
}

.childSchedule {
  display: flex;
  top: 50px;
  overflow: auto;
  width: 99%;
  height: 300px;
  background-color: white;
  margin-bottom: 50px;
  border: 1px rgba(128, 128, 128, 0.5) solid;
  border-radius: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.spacer1 {
  flex: 10%;
}
.xc{
  margin:10px;
}
.text {
  flex: 90%;
  height: 100%;
}
</style>